<template>
    <div class="login-page">
        <el-form ref="loginForm" :model="loginForm" :rules="rules2" label-position="left" label-width="0px" class="login-container">
            <h3 class="title font14">管理后台</h3>
            <el-form-item prop="account">
                <el-input v-model.trim="loginForm.account" type="text" auto-complete="off" placeholder="账号" @keyup.enter.native="handleSubmit2"/>
            </el-form-item>
            <el-form-item prop="checkPass">
                <el-input v-model.trim="loginForm.checkPass" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleSubmit2"/>
            </el-form-item>
            <!-- <el-form-item prop="imgCode">
                <el-input v-model.trim="loginForm.imgCode" type="text" class='imginp' auto-complete="off" placeholder="验证码" @keyup.enter.native="handleSubmit2"/>
                <img class='codeimg' :src="imgcodeUrl" alt="" @click.stop='getImgCode'/>
            </el-form-item> -->
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" :loading="logining" @click.native.prevent="handleSubmit2">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { requestLogin, baseURL } from "../api/api";
export default {
    data() {
        return {
            logining: false,
            loginForm: {
                account: "",
                checkPass: "",
                imgCode: ""
            },
            capKey: "",
            imgcodeUrl: "",
            rules2: {
                account: [
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur"
                    }
                ],
                checkPass: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ],
                imgCode: [
                    {
                        required: true,
                        message: "请输入图片验证码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    mounted() {
        // 获取图片验证码
        // this.getImgCode();
    },
    methods: {
        // getImgCode() {
        //     this.capKey = "ronge" + Math.random();
        //     this.imgcodeUrl = `${baseURL}/getVerifyCode?random=${this.capKey}`;
        // },
        handleReset2() {
            this.$refs.loginForm.resetFields();
        },
        handleSubmit2() {
            var _this = this;
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.logining = true;
                    requestLogin({
                        loginName: this.loginForm.account,
                        loginPwd: this.loginForm.checkPass,
                    })
                        .then(res => {
                            this.logining = false;
                            console.log(res, 'res>>');

                            // window.sessionStorage.setItem(
                            //     "data",
                            //     JSON.stringify(res.data)
                            // );
                            // window.sessionStorage.setItem(
                            //     "userName",
                            //     this.loginForm.account
                            // );
                            window.sessionStorage.setItem("token", res.data );
                            _this.$router.push({
                                path: "/goodsQuery"
                            });
                        })
                        .catch(() => {
                            this.logining = false;
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.login-page {
    background: url("https://img.alicdn.com/tfs/TB1M_keCNnaK1RjSZFBXXcW7VXa-1950-1302.jpg")
        no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 300px;
    padding: 35px 30px 15px 30px;
    background: #fff;
    border: 1px solid #eaeaea;
    // box-shadow: 0 0 25px #cac6c6;
    .title {
        margin: 0px auto 20px auto;
        text-align: center;
        color: #505458;
    }
    .font14 {
        font-size: 18px;
        font-weight: bold;
    }
    .imginp {
        width: 140px;
    }
    .codeimg {
        width: 76px;
        height: 36px;
        display: inline-block;
        position: absolute;
        right: 10px;
    }
}
</style>
